<template>
	<view class="container" :style="{ top: top, left: left }">
		<!-- 管家信息展示 -->
		<view class="own" v-if="own&& Object.keys(own).length > 0 && own.ownId!== storeData.user.userId" @click.stop="navigatorOwn">
			<view class="img_box">
				<image class="img" :src="own.groupPicPath || defaultAvatar" mode="aspectFill" @error="handleImageError"></image>
			</view>
			<view class="ownname">
				<text class="ownname_text">{{ own.groupName || '未知名称' }}</text>
				<text class="detail_txt">{{ own.signature || '暂无签名' }}</text>
			</view>
		</view>
		<view class="own" v-else-if="own && Object.keys(own).length > 0 && own.ownId === storeData.user.userId" @click.stop="naviAdim">
			<view class="img_box">
				<image class="img" :src="own.groupPicPath || defaultAvatar" mode="aspectFill" @error="handleImageError"></image>
			</view>
			<view class="ownname">
				<text class="ownname_text">{{ own.groupName || '未知名称' }}</text>
				<text class="detail_txt">管家管理</text>
			</view>
		</view>

		<view class="love" v-if="own && Object.keys(own).length > 0 && own.ownId !== storeData.user.userId"><text class="love_txt">关注</text></view>
		<!-- 申请管家入口 -->
		<view class="own noOwn" v-if="!own || Object.keys(own).length === 0" @touchend.prevent="handleRegOwn">
			<uni-icons class="img" type="compose" size="28" color="#fff"></uni-icons>
			<text class="regown_text">申请管家</text>
		</view>
	</view>
</template>

<script>

export default {
	name: 'OwnBar',
	props: {
		top: {
			type: String,
			default: '50rpx'
		},
		left: {
			type: String,
			default: ''
		},
		bottom: {
			type: String,
			default: ''
		},
		right: {
			type: String,
			default: '50rpx'
		}
	},

	data() {
		return {
			defaultAvatar: '/static/nicPic/m1.png',
		
		};
	},
	computed: {
		location() {
			return this.$store.state.msg.location;
		},
		storeData() {
			return this.$store.state.msg;
		},
		own(){
			return this.$store.state.msg.own
		}
		
	},

	methods: {
	
		// 处理头像加载失败
		handleImageError(e) {
			e.target.src = this.defaultAvatar;
		},
	
		handleRegOwn() {
			uni.navigateTo({
				url: '/pages/regOwn/regOwn'
			});
		},
		navigatorOwn() {
			if (this.own && this.own.ownId !== this.storeData.user.userId) {
				uni.navigateTo({
					url: `/pages/PrivateChat/PrivateChat?id=${this.own.ownId}`
				});
			}
		},
		naviAdim(){
			uni.navigateTo({
									url:`/own/ownAdmin/ownAdmin?groupId=${this.own.groupId}`
								})
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: fixed;
	z-index: 999;
	padding: 0; // 移除不必要的内边距（避免影响尺寸）
	// 强制统一盒模型计算方式
	box-sizing: border-box;
}

// 管家信息样式
.own {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 80rpx; // 固定高度（比之前略大，容纳内容）
	max-width: 300rpx; // 限制最大宽度，避免过宽
	padding: 0 15rpx; // 统一内边距
	border-radius: 40rpx; // 圆角为高度的一半（80rpx/2=40rpx），确保圆角矩形
	background-color: black;
}

.img_box {
	width: 60rpx;
	height: 60rpx; // 宽高严格相等
	border-radius: 50%; // 百分比圆角，确保圆形
	overflow: hidden;
	border: 1rpx solid #000;
}

.img {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
}

.ownname {
	padding: 0 15rpx;
}

.love {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60rpx;
	border-radius: 30rpx;
	background-color: #ff0000;
	padding: 0 10rpx;
}

.detail_txt {
	font-size: 16rpx;
	color: #fff;
	max-width: 180rpx; // 同上
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.love_txt {
	font-size: 26rpx;
	color: #fff;
	text-shadow: 0 0 2px #000, 1px 1px 2px #000;
}

.ownname_text {
	font-size: 24rpx;
	color: #fff;
	max-width: 180rpx; // 限制最大宽度
	overflow: hidden;
		/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */-NVUE */


}

// 申请管家样式
.regown {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 25%;
	background-color: #fff;
	padding: 10rpx;
	cursor: pointer;
}
.noOwn {
	height: 80rpx; // 固定高度
	min-width: 120rpx; // 固定最小宽度
	padding: 0 15rpx;
	border-radius: 40rpx; // 与高度匹配（80rpx/2=40rpx）
	background-color: #aa5500;
	// 确保内容不换行
	white-space: nowrap;
}

.regown_text {
	font-size: 26rpx;
	color: #fff;
	text-shadow: 0 0 2px #000, 1px 1px 2px #000;
}
</style>
